<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Textured menu</title>

<link href="style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript">
$(document).ready(function(){
						   
	$(window).resize(function(){
		$('.test').css({ width: $(window).width()/2 - $('.central').width()/2 });
		$('.submenu').css({ left: ($(window).width() - $('.submenu').outerWidth())/2 });

		/*$('.wrapper').css({
			position: absolute,
			left: ($(window).width() - $('.wrapper').outerWidth())/2,
			top: ($(window).height() - $('.wrapper').outerHeight())/2
		});*/
		
	});
	// To initially run the function:
	$(window).resize();
});

$('.submenu').hover(function(){	$(this).parent().css('-webkit-animation-play-state', 'paused');},
					function(){	$(this).parent().css('-webkit-animation-play-state', 'running');})
</script>
</head>

<body>
<div class="wrapper">
	<div id="main">
		<header id="header">
			<ul class="menu">
				<li class="central">
					<a href="#" title="">
						<span class="left"><span class="right"><span class="tail">
							<span class="icon"></span>
						</span></span></span>
						
						<ul class="submenu">
							<li class="entry">
								<div class="thumb-in">
									<a href="#" title="">
										<img width="60" height="60" src="images/t1.png" class="thumb" alt="" />
									</a>
								</div>
							</li>
							<li class="entry">
								<div class="thumb-in">
									<a href="#" title="">
										<img width="60" height="60" src="images/t2.png" class="thumb" alt="" />
									</a>
								</div>
							</li>
							<li class="entry">
								<div class="thumb-in">
									<a href="#" title="">
										<img width="60" height="60" src="images/t3.png" class="thumb" alt="" />
									</a>
								</div>
							</li>
						</ul>						
					</a>
				</li>
			</ul>
			
			<ul class="sx-menu left test">
				<li class="central">
					<a href="#">
						<span class="left"><span class="right"><span class="tail">
							<span class="prefer"></span>
						</span></span></span>
					</a>
				</li>
			</ul>
			
			<ul class="sx-menu right test">
				<li class="central">
					<a href="#">
						<span class="left"><span class="right"><span class="tail">
							<span class="map"></span>
						</span></span></span>
					</a>
				</li>
			</ul>
		</header>
	</div>
</div>
</body>
</html>